<template>
  <div class="home">
    <div class="header" style="display: flex;width:100%;text-align:center;background-color:rgb(1, 11, 14)">
      <el-image :src="require('@/assets/blogger.svg')" style="width:30px;margin-left:20px;margin-top:-4px"/>
      <el-menu :default-active="$route.path" active-text-color="#199000" class="el-menu-demo" router mode="horizontal" style="width: 100%;padding-left:6%; position: relative;background-color:rgb(1, 11, 14)">
        <el-menu-item index="/">
          <i class="el-icon-eleme"></i>
          <span class="tname">首页</span>
        </el-menu-item>
        <el-menu-item index="/type">
          <i class="el-icon-folder"></i>
          <span class="tname">分类</span>
        </el-menu-item>
        <el-menu-item index="/top">
          <i class="el-icon-s-data"></i>
          <span class="tname">统计</span>
        </el-menu-item>
        <el-menu-item index="/cache">
          <i class="el-icon-copy-document"></i>
          <span class="tname">归档</span>
        </el-menu-item>
        <el-menu-item index="/for">
          <i class="el-icon-copy-document"></i>
          <span class="tname">关于我</span>
        </el-menu-item>

          <el-input
          style="width: 200px;margin-top:10px;%"
          placeholder="请输入标题"
          v-model="input"
          prefix-icon="el-icon-search"
          clearable>
        </el-input>
        <el-button type="primary" style="margin-left: 5px;">搜索</el-button>
        <el-dropdown szie="medium" style="width: 100px;margin-top:20px;margin-left:100px;cursor:pointer">
          <span class="el-dropdown-link">
              管理员<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-left:200px">
              <el-dropdown-item >
                  <div style="width:40px;text-align:center" @click="logout">注销</div>
              </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div style="position: absolute;margin-left:80%;margin-top:-40px">
          <el-avatar :src="src"></el-avatar>
        </div>
      </el-menu>
      

    </div>
    <!-- 主体 -->
    <div class="bodys">
      <router-view/>
    </div>

    <!-- 底部 -->
    <div style="background-color:rgb(1, 11, 14);margin-top:40px;height:250px;">
      <el-row style="background-color:rgb(1, 11, 14);color:white;border-radius:14px">
        <el-col :span="8" style="text-align: center;border-right:1px #eee solid;height:250px;">
          <div style="width: 80%;padding-left:15px;margin-top:60px">
            <h3>网站介绍</h3>
            <p>这是一个关于计算机学习的网站，包含了博主关于java的相关学习技术栈</p>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: center;border-right:1px #eee solid;height:250px;">
          <div style="width: 80%;margin-top:50px">
            <el-image :src="src" style="width: 60%;"></el-image>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: center;border-right:1px #eee solid;height:250px;">
          <div style="width: 80%;padding-left:15px;margin-top:60px">
            <h3>联系方式</h3>
            <div>QQ:5174812</div><hr>
            <div>微信:5174812</div><hr>
            <div>邮箱:5174812</div><hr>
          </div>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

<script>
import jsCookie from 'js-cookie';
export default {
  name: 'HomeView',
  data(){
    return{
      input:'',
      src:require('@/assets/erweima.png'),
      form:{}
    }
  },
  methods:{
    logout(){
      this.$router.push('/userlogin')
      jsCookie.remove('user')
    },
  }
}
</script>

<style scoped>
.headerLine{
  padding-left: 30%;
  width: 100%;
  font-weight: 800;
  font-size: 35px;
}
el-menu-item{
  color: white;
  
}
.tname{
  font-size: 20px;
}
</style>